http css img图片居中裁剪最佳方式 | 您所在的位置:网站首页 › html 图片宽高自适应居中裁剪不失真 › http css img图片居中裁剪最佳方式 |
http css img图片居中裁剪最佳方式
css图片填充的几种方式
当图片比例不固定时,想要让图片自适应,一般都会用background-size:cover/contain,但是这个只适用于背景图。
img有个属性object-fit 属性值:object-fit: fill / contain / cover / none / scale-down; fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致,长的那条等比缩放,可能会有留白。 cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致,短的那条等比缩放。可能会有部分区域不可见。 none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。 scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸,保持图片的原有尺寸,不会放大失真;容器尺寸小于图片内容尺寸,用法跟contain一样。
使用技巧: css样式代码: .aui-sam-img { width: 100px; height: 72px; } .aui-sam-img img { object-fit: cover; width: 100%; height: 100%; display: inline-block; border: none; border-radius: 10px; } Html代码:
|
CopyRight 2018-2019 实验室设备网 版权所有 |